<template>
    <div :class="isUpdate&&'fadeIn'">
        <div :class="style">
            <div class="practice_common_box">
                <div class="right-content">
                    <template v-for="(item,qIndex) in content.questions">
                        <p class="questions">{{item.question}}</p>
                        <ul class="answer">
                            <template>
                                <li v-for="(ans,aindex) in item.answers" v-if="ans.image">
                                    <label class="checkbox-container">
                                        <input type="checkbox" :name="item.question"
                                               :value="item.question"
                                               @click="l4AnswerHandler($event,qIndex,ans.isRight,aindex,ans)">
                                        <span class="content-checkbox"></span>
                                        <loadingImage :src="addPrefixHost(ans.image)" alt=""
                                                      class="picture"
                                        ></loadingImage>
                                    </label>
                                </li>
                                <li v-for="(ans,aindex) in item.answers" v-if="templateStyle!=='level-4'&&!ans.image"
                                    :style="{margin:`0 ${0.1/item.answers.length*100}%`}"
                                    class="li">
                                    <label class="checkbox-container">
                                        <input type="checkbox"
                                               :value="item.question"
                                               :name="item.question">
                                        <div class="content-button"
                                             @click="l4AnswerHandler($event,qIndex,ans.isRight,aindex,ans)">
                                            <span>{{ans.answer}}</span></div>
                                    </label>
                                </li>
                                <li v-for="(ans,aindex) in item.answers" v-if="templateStyle==='level-4'&&!ans.image"
                                    :style="{margin:`0 ${0.1/item.answers.length*100}%`}">
                                    <label class="checkbox-container">
                                        <input type="checkbox" :name="item.question"
                                               :value="item.question"
                                               @click="l4AnswerHandler($event,qIndex,ans.isRight,aindex,ans)">
                                        <span class="content-checkbox"></span>
                                        <span class="option">{{ans.answer}}</span>
                                    </label>
                                </li>
                            </template>
                        </ul>
                    </template>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {mapState, mapGetters, mapActions} from 'vuex'
    import Component from 'vue-class-component'
    import R from 'ramda';
    import loadingImage from '~/components/loadingImage'

    export default {
        async fetch({store, params}) {
            await store.dispatch("index/exercise/index/setContentInfo", params);
        },
        data() {
            return {
                answerArr: [],
                myAnswers: [],
                isUpdate: false,
                correctArr: [],
                errorMessage: "",
                selectArr: [],
            }
        },
        methods: {
            ...mapActions('index/exercise/index', [
                'setAnswer',
                'setMyAnswer'
            ]),
//            answerHandler(index, isRight, itemIndex = 0) {
////                Vue.set(this.answerArr, sentenceIndex, isRight);
////                Vue.set(this.sentenceActive, sentenceIndex, index);
//            },
            l4AnswerHandler(e, index, isRight, itemIndex = 0, ans) {
                let answer = false;
                let mySelect = "";
                if (this.answerArr[index][itemIndex] === "F") {
                    if (isRight === "T") {
                        Vue.set(this.answerArr[index], itemIndex, isRight);
                    } else {
                        Vue.set(this.answerArr[index], itemIndex, "T");
                    }
                    Vue.set(this.myAnswers[index], [itemIndex], ans.image ? ans.image : ans.answer);
                } else {
                    Vue.set(this.answerArr[index], itemIndex, "F");
                    Vue.set(this.myAnswers[index], itemIndex, "");
                }
                if (this.answerArr.toString() === this.correctArr.toString()) {
                    answer = true;
                }
                for (let i = 0; i < this.myAnswers.length; i++) {
                    this.selectArr[i] = [];
                    for (let j = 0; j < this.myAnswers[i].length; j++) {
                        if (this.myAnswers[i][j] !== "") {
                            this.selectArr[i].push(this.myAnswers[i][j])
                        }
                    }
                    mySelect += (this.selectArr[i].length ? this.selectArr[i] : "null") + "|";
                }
                mySelect = mySelect.replace(/,/g, '#');
                this.setAnswer({
                    answer,
                    msg: this.errorMessage
                });
                this.setMyAnswer(mySelect);
            },
            init() {
                this.$nextTick(_ => {
                    if (this.content.questions) {
                        for (let i = 0; i < this.content.questions.length; i++) {
                            this.answerArr.push([]);
                            this.myAnswers.push([]);
                            this.correctArr.push([]);
                            this.selectArr.push([]);
                            if (this.content.questions[i].answers) {
                                for (let j = 0; j < this.content.questions[i].answers.length; j++) {
                                    Vue.set(this.correctArr[i], j, this.content.questions[i].answers[j].isRight);
                                    Vue.set(this.answerArr[i], j, "F");
                                    Vue.set(this.myAnswers[i], j, "");
                                    if (this.content.questions[i].answers[j].isRight === "T") {
                                        this.errorMessage += (i + 1) + "." + this.content.questions[i].answers[j].answer + ";\n";
                                    }
                                }
                            }
                        }
                    }
                    this.setAnswer({
                        answer: false,
                        msg: this.errorMessage
                    });
                })
            }
        },
        mounted() {
            this.init();
        },

        computed: {
            ...mapState('index/exercise/index', {
                contentInfo: state => state.contentInfo,
                content: state => state.contentInfo ? state.contentInfo.content : {},
                templateStyle: state => state.templateStyle
            }),
            style() {
                switch (this.templateStyle) {
                    case "level-4":
                        return 'theme-4';
                    case "level-3":
                        return 'theme-3';
                }
            },
        },
        created() {
        },
        watch: {
            content() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                const initData = {
                    answerArr: [],
                    myAnswers: [],
                    correctArr: [],
                    errorMessage: "",
                    selectArr: [],
                };
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600);
                this.init();

            }
        },
        components: {loadingImage,}
    }
</script>

<style lang="less" scoped>
    .fadeIn {
        animation: fadeIn .4s ease-in;
        transform: translateZ(0);
    }

    @keyframes fadeIn {
        from {
            transform-origin: left;
            transform: scaleX(.4);
            opacity: 0;
        }
    }

    .theme-4 {
        .practice_common_box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 900px;
            margin: 0 auto;
            text-align: center;
            margin-top: 3%;
            .right-content {
                width: 698px;
                background: url(~~assets/img/main_content/exercise/questionAnswer-01.png) no-repeat;
                background-size: 100% 100%;
                padding: 5%;
                margin: 0 auto;
                box-sizing: border-box;
                .questions {
                    color: #1B4471;
                    font-size: 30px;
                    text-align: left;
                }
                .answer {
                    overflow: hidden;
                    .picture {
                        width: 140px;
                        height: .8rem;
                        vertical-align: top;
                    }
                    .content-button {
                        cursor: pointer;
                        height: 60px;
                        min-width: 130px;
                        box-sizing: border-box;
                        background: url("~~assets/img/main_content/exercise/content-button.png") no-repeat center;
                        background-size: 100% 100%;
                        border-radius: 5px;
                        line-height: 60px;
                        text-align: center;
                        padding: 0 10%;
                        position: relative;
                        display: inline-block;
                        font-size: 22px;
                        color: #ffffff;
                        /*&.active {*/
                        /*background: url("~~assets/img/main_content/exercise/content-button-active.png") no-repeat center;*/
                        /*background-size: 100% 100%;*/
                        /*color: black;*/
                        /*}*/
                    }
                }
                .answer > li {
                    display: inline-block;
                    margin-top: 2%;
                    /*min-width: 30%;*/
                    float: left;
                    label {
                        width: 100%;
                        height: 100%;
                        display: block;
                        vertical-align: middle;
                    }
                }
                .checkbox-container {
                    [type = 'checkbox'] {
                        display: none;
                    }
                    [type = 'checkbox']:checked ~ .content-checkbox {
                        background: rgba(0, 0, 0, .5);
                    }
                }
                .content-checkbox {
                    width: 30px;
                    height: 30px;
                    background: #ffffff;
                    border: 2px solid black;
                    border-radius: 5px;
                    display: inline-block;
                    vertical-align: top;
                    margin: 0 10px;
                }
                .answer > li .option {
                    display: inline-block;
                    font-size: 22px;
                    color: blue;
                    user-select: none;
                    border: 3px dashed #ffffff;
                    border-radius: 5px;
                    line-height: 26px;
                    vertical-align: middle;
                }
            }

        }
    }

    .theme-3 {
        .practice_common_box {
            width: 800px;
            margin: 0 auto;
            text-align: left;
            margin-top: 1%;
            .right-content {
                background: url(~~assets/img/main_content/exercise/answer-bg.png) no-repeat;
                background-size: 100% 100%;
                padding: 5%;
                margin: 0 auto;
                box-sizing: border-box;
                .questions {
                    color: #fcf6fa;
                    font-size: 30px;
                    text-align: left;
                }
                .answer {
                    .picture {
                        width: 140px;
                        vertical-align: top;
                        border-radius: 5px;
                    }
                    .content-button {
                        cursor: pointer;
                        height: 60px;
                        min-width: 130px;
                        font-size: .22rem;
                        background: url("~~assets/img/main_content/exercise/content-button.png") no-repeat center;
                        background-size: 100% 100%;
                        border-radius: 5px;
                        line-height: 60px;
                        text-align: center;
                        position: relative;
                        display: inline-block;
                        color: #0b2f49;
                        &.active {
                            background: url("~~assets/img/main_content/exercise/content-button-active.png") no-repeat center;
                            background-size: 100% 100%;
                            color: black;
                        }
                    }
                }
                .answer > li {
                    display: inline-block;
                    margin-top: 2%;
                    /*min-width: 30%;*/
                    label {
                        width: 100%;
                        height: 100%;
                        display: block;
                        vertical-align: middle;
                    }
                }
                input[type = "radio"] {
                    display: none;
                    &:checked + .content-checkbox {
                        background: rgba(0, 0, 0, .5);
                    }
                }
                .checkbox-container {
                    [type = 'checkbox'] {
                        display: none;
                    }
                    [type = 'checkbox']:checked ~ .content-checkbox {
                        background: rgba(0, 0, 0, .5);
                    }
                    [type = 'checkbox']:checked ~ .content-button {
                        background: url("~~assets/img/main_content/exercise/content-button-active.png") no-repeat center;
                        background-size: 100% 100%;
                        color: black;
                    }
                }
                .content-checkbox {
                    width: 30px;
                    height: 30px;
                    background: #ffffff;
                    border: 2px solid black;
                    margin: 0 10px;
                    border-radius: 5px;
                    display: inline-block;
                    vertical-align: top;

                }
                .answer > li .option {
                    display: inline-block;
                    font-size: 22px;
                    width: 50%;
                    color: blue;
                    user-select: none;
                    border: 3px dashed #ffffff;
                    border-radius: 5px;
                    line-height: 26px;
                    vertical-align: middle;
                }
            }

        }
    }
</style>
